<template>
  <view v-if="visible" class="save-modal">
    <view class="modal-overlay" @click="$emit('close')"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">💾 存档管理</text>
        <button class="close-btn" @click="$emit('close')">×</button>
      </view>
      <view class="save-list">
        <!-- 自动存档 -->
        <view 
          class="save-item auto-save" 
          :class="{ 'empty': !autoSaveData }"
          @click="$emit('loadAutoSave')"
        >
          <view class="save-info">
            <text class="save-name">🔄 自动存档</text>
            <text class="save-date" v-if="autoSaveData">{{ autoSaveData.date }}</text>
            <text class="save-status" v-if="!autoSaveData">无自动存档</text>
          </view>
          <view class="save-actions">
            <button 
              class="save-action-btn" 
              @click.stop="$emit('saveAutoSave')" 
              v-if="autoSaveData"
            >
              覆盖
            </button>
            <button 
              class="save-action-btn delete" 
              @click.stop="$emit('deleteAutoSave')" 
              v-if="autoSaveData"
            >
              删除
            </button>
          </view>
        </view>
        
        <!-- 手动存档槽位 -->
        <view 
          class="save-item" 
          v-for="(save, index) in saveSlots" 
          :key="index"
          :class="{ 'empty': !save.data }"
          @click="$emit('load', index)"
        >
          <view class="save-info">
            <text class="save-name">存档 {{ index + 1 }}</text>
            <text class="save-date" v-if="save.date">{{ save.date }}</text>
            <text class="save-status" v-if="!save.data">空存档</text>
          </view>
          <view class="save-actions">
            <button 
              class="save-action-btn" 
              @click.stop="$emit('save', index)"
            >
              保存
            </button>
            <button 
              class="save-action-btn delete" 
              @click.stop="$emit('delete', index)" 
              v-if="save.data"
            >
              删除
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SaveModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    saveSlots: {
      type: Array,
      default: () => []
    },
    autoSaveData: {
      type: Object,
      default: null
    }
  }
}
</script>

<style scoped>
/* 存档弹窗样式 */
.save-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5rpx);
}

.modal-content {
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 20rpx;
  margin: 40rpx;
  width: calc(100% - 80rpx);
  height: calc(100% - 80rpx);
  max-width: 600rpx;
  max-height: 800rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #f8fafc;
}

.close-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.save-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 20rpx;
  max-height: 70vh;
  overflow-y: auto;
}

.save-item {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2rpx solid #475569;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.save-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
  border-color: #64748b;
}

.save-item.empty {
  opacity: 0.6;
  border-color: #64748b;
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

.save-item.auto-save {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
}

.save-item.auto-save:hover {
  border-color: #d97706;
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}

.save-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  flex: 1;
}

.save-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #f8fafc;
}

.save-date {
  font-size: 24rpx;
  color: #94a3b8;
}

.save-status {
  font-size: 24rpx;
  color: #64748b;
}

.save-actions {
  display: flex;
  gap: 8rpx;
}

.save-action-btn {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #3b82f6;
  color: #fff;
}

.save-action-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.save-action-btn.delete {
  background: #ef4444;
}

.save-action-btn.delete:hover {
  background: #dc2626;
}
</style>
